<template>
    <div v-if="searchSetting.length" ref="searchContent" class="search-content" :style="{ background: backColor }">
        <a-form v-if="searchSetting.length" ref="searchForm" :model="searchModel" :layout="namePlace">
            <div class="form-left">
                <a-form-item v-for="(item, index) in searchSetting" :key="index">
                    <template #label>
                        <span class="label-info" :style="titleStyles(item.textStyle)">{{ item.fieldLabel }}</span>
                    </template>
                    <search-component
                        :option-data="item"
                        :dataSourceId="dataSourceId"
                        :type="item.fieldType"
                        :field-id="item.fieldValue"
                        :getPageColumnValue="getPageColumnValue"
                        v-model:value="searchModel[item.fieldValue]"
                        @change="newValue => attributeChange(newValue, item)"
                    />
                </a-form-item>
                <div class="form-right">
                    <a-button type="primary" v-if="showSearch" class="mr24" @click="onSearchSubmit"> 搜索 </a-button>
                    <a-button @click="resetForm" v-if="showReset"> 重置 </a-button>
                </div>
            </div>
        </a-form>
    </div>
</template>
<script>
    import { defineComponent, ref, watch } from 'vue'
    import SearchComponent from '@/components/table/SearchComponent.vue'

    export default defineComponent({
        name: 'SearchForm',
        components: {
            SearchComponent
        },
        props: {
            searchSetting: {
                type: Array
            },
            showReset: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            showSearch: {
                type: Boolean,
                default: () => {
                    return false
                }
            },
            dataSourceId: {
                type: String
            },
            getPageColumnValue: {
                type: Function
            },
            backColor: {
                type: String,
                default: () => {
                    return '#ffffff'
                }
            },
            namePlace: {
                type: String
            }
        },
        emits: ['searchForm'],
        setup(props, { emit }) {
            const alignType = {
                ALIGN_LEFT: 'left',
                ALIGN_CENTER: 'center',
                ALIGN_RIGHT: 'right'
            }
            const onSearchSubmit = () => {
                emit('searchForm', searchModel.value)
            }
            const resetForm = () => {
                props.searchSetting.forEach(item => {
                    searchModel.value[item.fieldValue] = item.dataRange?.length === 0 ? '' : undefined
                })
                emit('searchForm', searchModel.value)
            }
            const attributeChange = (newValue, childItem) => {
                searchModel.value[childItem.fieldValue] = newValue
            }
            const titleStyles = item => {
                const { fontSize, color, bold, italic, underline, align } = item
                const ret = {
                    fontSize: `${fontSize}px`,
                    color,
                    textAlign: alignType[align],
                    fontWeight: bold ? 'bold' : 'normal',
                    textDecoration: underline ? 'underline' : 'none',
                    fontStyle: italic ? 'italic' : 'initial'
                }
                return ret
            }

            const searchModel = ref({})
            watch(
                () => props.searchSetting,
                newValue => {
                    newValue.forEach(item => {
                        searchModel.value[item.fieldValue] = ''
                    })
                }
            )
            return {
                titleStyles,
                onSearchSubmit,
                searchModel,
                resetForm,
                attributeChange
            }
        }
    })
</script>

<style lang="less" scoped>
    .search-content {
      padding: 24px 24px 0px 8px;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    .search-content .@{ant-prefix}-form {
      display: flex;
    }
    .search-content .@{ant-prefix}-form .form-left {
      flex: 1;
    }
    .search-content .@{ant-prefix}-form .@{ant-prefix}-form-item {
       min-width: 10%;
       width: calc(25% - 16px);
       float: left;
       padding-right: 12px;
       margin-left: 16px;
       margin-bottom: 24px;
    }
    .search-content .@{ant-prefix}-form .@{ant-prefix}-form-item :deep(.@{ant-prefix}-form-item-control-wrapper) {
       flex: 1;
     }
     .mr24{
       margin-right: 24px;
     }

    .search-content .@{ant-prefix}-form .label-info {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-align: right;
      max-height: 32px;
      width: 112px;
      line-height: 16px;
      margin-top: -5px;
      vertical-align: middle;
    }

    .search-content .@{ant-prefix}-form .form-right {
      float: right;
      padding-top: 3px;
      margin-bottom: 16px;
      margin-right: 12px;
    }

    .@{ant-prefix}-form-horizontal .@{ant-prefix}-form-item{
        display: flex;
        align-items: center;
    }
    .@{ant-prefix}-form-vertical.@{ant-prefix}-form-item-label {
        display: block;
        white-space: normal;
        text-align: left;
    }
</style>
